<script lang="ts" setup>
import { ref, computed } from "vue";
import {toast} from "../../components/popup/popup";
import { getHouseholdByFamilyId,deleteHousehold } from "../../api/family/household";
import {getFamily} from "../../store";
import {goEditHouseinfo} from "../../tools/go";
import {goHouseinfo ,goMy} from "../../tools/go";
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import UniPopupDialog from "../../uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue";
import UniPopup from "../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import {getFamilyById} from "../../api/family/family";

// 菜单配置
const menus = [
  { id: 1, name: "房屋管理", icon: "home" },
  { id: 2, name: "物业缴费", icon: "wallet" },
  { id: 3, name: "访客管理", icon: "staff" },
  { id: 4, name: "设置", icon: "settings" },
];



const searchKey = ref("");
const currentPage = ref(1);
const totalPages = ref(5);
const expandedId = ref("");
const deleteTarget = ref(null);

// 引用
const menuPopup = ref();
const confirmPopup = ref();

// 计算属性：过滤后的列表
const filteredMembers = computed(() => {
  if (!searchKey.value) return householdList.value;
  console.log("searchKey.value",searchKey.value)
  return householdList.value.filter(
      (item) => item.householdName.includes(searchKey.value) || item.phone.includes(searchKey.value)
  );
});

// 方法
const handleMenuClick = () => {
  menuPopup.value.open();
};

const handleMenuItemClick = (menu: any) => {
  menuPopup.value.close();
  toast(`跳转到${menu.name}`, "none")
};

const handleAddMember = () => {
  toast("添加住户", "none")
  goHouseinfo()
};

const toggleDetail = (id: string) => {
  expandedId.value = expandedId.value === id ? "" : id;
};

const handleEdit = (item: any) => {
  toast(`编辑住户：${item.householdName}`, "none")
  goEditHouseinfo(item.id)
};

const handleDelete = (item: any) => {
  deleteTarget.value = item;
  confirmPopup.value.open();
};

const confirmDelete = () => {
  if (deleteTarget.value) {
    householdList.value = householdList.value.filter(
        (item) => item.id !== deleteTarget.value.id,
        deleteHousehold(deleteTarget.value.id).then(res=>{
          toast("删除成功", "success")
        }).catch(err=>{
          toast("删除失败", "error")
        })
    );
    toast("删除成功", "success")

  }
  confirmPopup.value.close();
  deleteTarget.value = null;
};

const closeConfirmDialog = () => {
  confirmPopup.value.close();
  deleteTarget.value = null;
};

const handlePageChange = (page: number) => {
  currentPage.value = page;
};

// 工具方法
const formatIdCard = (cardNum: string) => {
  return cardNum.replace(/^(.{6})(.*)(.{4})$/, "$1********$3");
};

const formatTime = (time: string) => {
  return time;
};

const householdList = ref([])
const familyName = ref("")

const getHouseholdByFamily = () =>{
  getHouseholdByFamilyId(getFamily()).then(res=>{
    householdList.value = res.data})
}
function i() {
  getFamilyById(getFamily()).then(res => {
    //@ts-ignore
    familyName.value = res.data.familyName
  })
  getHouseholdByFamily()
}

i()
</script>

<template>
  <view class="back">
    <view class="container">
      <!-- 顶部导航 -->
      <view class="header">
        <v-icon icon="mdi-chevron-left"  size="27" color="#000" @click="goMy()"></v-icon>
        <view class="header-left">
          <text class="family-name">{{familyName}}</text>
        </view>
        <view class="header-right">
          <uni-icons type="list" size="24" @click="handleMenuClick"></uni-icons>
        </view>
      </view>

      <!-- 搜索区域 -->
      <view class="search-box">
        <view class="search-input">
          <uni-icons type="search" size="20" color="#999"></uni-icons>
          <input
              type="text"
              v-model="searchKey"
              placeholder="搜索住户姓名/手机号"
              placeholder-class="placeholder"
          />
        </view>
        <button class="add-btn" @click="handleAddMember">
          <uni-icons type="plusempty" size="20" color="#FFFFFF"></uni-icons>
          <text>添加住户</text>
        </button>
      </view>

      <!-- 住户列表 -->
      <scroll-view class="member-list" scroll-y>
        <view
            class="member-card"
            v-for="item in filteredMembers"
            :key="item.id"
            @click="toggleDetail(item.id)"
        >
          <view class="card-main">
            <view class="info">
              <view class="info-row">
                <text class="name">{{item.householdName}}</text>
                <text class="id">ID: {{item.id}}</text>
              </view>
              <view class="info-row">
                <text class="phone">{{item.phone}}</text>

              </view>
            </view>
            <view class="operations">
              <view class="edit-btn" @click.stop="handleEdit(item)">
                <uni-icons type="compose" size="20" color="#666666"></uni-icons>
              </view>
              <view class="delete-btn" @click.stop="handleDelete(item)">
                <uni-icons type="trash" size="20" color="#666666"></uni-icons>
              </view>
              <view class="more-btn">
                <uni-icons type="more" size="20" color="#666666"></uni-icons>
              </view>
            </view>
          </view>
          <view class="card-detail" v-show="expandedId === item.id">
            <view class="detail-item">
              <text class="label">家庭ID：</text>
              <text class="value">{{item.familyId}}</text>
            </view>
            <view class="detail-item">
              <text class="label">住址：</text>
              <text class="value">{{item.curReside}}</text>
            </view>
            <view class="detail-item">
              <text class="label">身份：</text>
              <text class="value">{{formatIdCard(item.cardNum)}}</text>
            </view>
            <view class="detail-item">
              <text class="label">备注：</text>
              <text class="value">{{item.householdRmake}}</text>
            </view>
            <view class="detail-item">
              <text class="label">更新者：</text>
              <text class="value">{{item.updateBy}}</text>
            </view>
            <view class="detail-item">
              <text class="label">更新时间：</text>
              <text class="value">{{formatTime(item.updateTime)}}</text>
            </view>
          </view>
        </view>
      </scroll-view>

      <!-- 分页 -->
      <view class="pagination">
        <view class="page-info">
          <text>共 {{totalPages}} 页</text>
        </view>
        <view class="page-operations">
          <button
              class="page-btn"
              :disabled="currentPage <= 1"
              @click="handlePageChange(currentPage - 1)"
          >
            上一页
          </button>
          <text class="current-page">{{currentPage}}</text>
          <button
              class="page-btn"
              :disabled="currentPage >= totalPages"
              @click="handlePageChange(currentPage + 1)"
          >
            下一页
          </button>
        </view>
      </view>

      <!-- 菜单弹窗 -->
      <uni-popup ref="menuPopup" type="right">
        <view class="menu-content">
          <view
              class="menu-item"
              v-for="menu in menus"
              :key="menu.id"
              @click="handleMenuItemClick(menu)"
          >
            <uni-icons :type="menu.icon" size="20" color="#333333"></uni-icons>
            <text>{{menu.name}}</text>
          </view>
        </view>
      </uni-popup>

      <!-- 确认删除弹窗 -->
      <uni-popup ref="confirmPopup" type="dialog">
        <uni-popup-dialog
            type="warning"
            title="确认删除"
            content="是否确认删除该住户信息？"
            :before-close="true"
            @confirm="confirmDelete"
            @close="closeConfirmDialog"
        ></uni-popup-dialog>
      </uni-popup>
    </view>
  </view>
</template>



<style lang="scss" scoped>
@use "../../static/css/main";

.back {
  @include main.useTheme() {
    page {
      height: 100%;
      background-color: main.getVal(primary_bg_color);
    }

    .container {
      
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      background-color: main.getVal(primary_bg_color);
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 30rpx;
      background-color: main.getVal(one_lv_bg_color);
      box-shadow: 0 2px 4px rgba(main.getVal(primary_text_color), 0.05);
    }

    .family-name {
      font-size: 18px;
      font-weight: bold;
      color: main.getVal(primary_text_color);
    }

    .search-box {
      padding: 20rpx 30rpx;
      display: flex;
      align-items: center;
      gap: 20rpx;
      background-color: main.getVal(one_lv_bg_color);
    }

    .search-input {
      flex: 1;
      height: 80rpx;
      background-color: main.getVal(two_lv_bg_color);
      border-radius: 40rpx;
      display: flex;
      align-items: center;
      padding: 0 30rpx;
      border: 1px solid main.getVal(primary_border_color);
    }

    .search-input input {
      flex: 1;
      margin-left: 20rpx;
      font-size: 14px;
      color: main.getVal(primary_text_color);
    }

    .placeholder {
      color: main.getVal(other_lv_text_color);
    }

    .add-btn {
      display: flex;
      align-items: center;
      background-color: main.getVal(pri_color);
      border-radius: 40rpx;
      padding: 0 30rpx;
      height: 80rpx;
    }

    .add-btn text {
      color: white;
      font-size: 14px;
      margin-left: 10rpx;
    }

    .member-list {
      flex: 1;
      padding: 20rpx 30rpx;
      overflow: auto;
    }

    .member-card {
      background-color: main.getVal(one_lv_bg_color);
      border-radius: 16rpx;
      margin-bottom: 20rpx;
      overflow: hidden;
      border: 1px solid main.getVal(primary_border_color);
    }

    .card-main {
      padding: 30rpx;
      display: flex;
      align-items: center;
    }

    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50rpx;
    }

    .info {
      flex: 1;
      margin-left: 20rpx;
    }

    .info-row {
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;
    }

    .info-row:last-child {
      margin-bottom: 0;
    }

    .name {
      font-size: 16px;
      font-weight: bold;
      color: main.getVal(primary_text_color);
      margin-right: 20rpx;
    }

    .id {
      font-size: 14px;
      color: main.getVal(one_lv_text_color);
    }

    .phone {
      font-size: 14px;
      color: main.getVal(one_lv_text_color);
      margin-right: 20rpx;
    }

    .operations {
      display: flex;
      gap: 20rpx;
    }

    .edit-btn,
    .more-btn,
    .delete-btn {
      padding: 10rpx;
    }

    .card-detail {
      padding: 20rpx 30rpx;
      background-color: main.getVal(two_lv_bg_color);
      border-top: 1px solid main.getVal(one_lv_border_color);
    }



    .detail-item {
      display: flex;
      margin-bottom: 10rpx;
    }

    .detail-item:last-child {
      margin-bottom: 0;
    }


    .label {
      width: 160rpx;
      font-size: 14px;
      color: main.getVal(two_lv_text_color);
    }

    .value {
      flex: 1;
      font-size: 14px;
      color: main.getVal(one_lv_text_color);
    }

    .pagination {
      padding: 20rpx 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: main.getVal(one_lv_bg_color);
      border-top: 1px solid main.getVal(primary_border_color);
    }

    .page-info {
      font-size: 14px;
      color: main.getVal(other_lv_text_color);
    }

    .page-operations {
      display: flex;
      align-items: center;
      gap: 20rpx;
    }

    .page-btn {
      font-size: 14px;
      color: main.getVal(primary_text_color);
      background-color: main.getVal(two_lv_bg_color);
      border-radius: 8rpx;
      padding: 0 20rpx;
      height: 60rpx;
      line-height: 60rpx;
    }

    .page-btn[disabled] {
      color: main.getVal(other_lv_text_color);
      background: main.getVal(primary_bg_color);
    }

    .current-page {
      font-size: 14px;
      color: main.getVal(primary_text_color);
    }

    .menu-content {
      width: 500rpx;
      background-color: main.getVal(one_lv_bg_color);
      padding: 30rpx;
    }

    .menu-item {
      display: flex;
      align-items: center;
      padding: 30rpx 0;
      border-bottom: 1px solid main.getVal(primary_border_color);
    }

    .menu-item:last-child {
      border-bottom: none;
    }

    .menu-item text {
      margin-left: 20rpx;
      font-size: 16px;
      color: main.getVal(primary_text_color);
    }

    .menu-item uni-icons {
      color: main.getVal(pri_color) !important;
    }
  }
}

</style>
